<template>
  <h1>属性绑定测试文段</h1>
  <input type="text" value="Xxx"><!--输入框默认输入普通文本-->
  <input type="text" value="info">
  <!--
    -bind命令:
    将属性值与响应式变量的值进行绑定
    简便写法: 将`v-bind`省略 只在`value`属性前添加":"用以标识
            即 `:value=""`
  -->
  <input type="text" v-bind:value="info+1">
  <input type="text" :value="info+2">
  <br>
<!--  普通超链接绑定的地址形式为字符串-->
  <a href="https://www.baidu.com">超链接1</a>
<!--  想要进行地址的映射 需要使用如上命令进行绑定 同样可以简写为冒号-->
  <a v-bind:href="url">超链接2</a>
  <a :href="url">超链接3</a>
</template>

<script setup>
import {ref} from "vue";

const info = ref('属性绑定字段');
const url = ref('https://www.baidu.com');
url.value = 'https://www.jd.com';
</script>

<style scoped>

</style>